<template>
  <q-dialog v-model="doctors.isCreating">
    <q-card class="q-pa-md"
            style="width: 700px; max-width: 80vw">
      <q-item-label class="text-h5">
        {{ 'Создать новый профиль врача' }}
      </q-item-label>
      <q-item class="column items-center justify-between">
        <q-input v-model="doctorForm.user.full_name"
                 :rules="[val => !!val || 'Поле Имя обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 label="Имя" />
        <q-input v-model="doctorForm.user.email"
                 :rules="[val => !!val || 'Поле Email обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="login"
                 label="Email"/>
        <q-input v-model="doctorForm.user.password"
                 :rules="[val => !!val || 'Поле Пароль обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="password"
                 label="Пароль"/>
        <q-select v-model="doctorForm.main_modality"
                  :options="availableModalities"
                  option-label="name"
                  option-value="id"
                  style="width: 100%; border-radius: 4px"
                  label="Основная специализация"
                  @update:model-value="defineMainModality"/>
        <q-select v-model="doctorForm.additional_modalities"
                  :options="availableModalities"
                  multiple
                  option-label="name"
                  option-value="id"
                  style="width: 100%; border-radius: 4px"
                  label="Доступные доп. специализации" />
        <q-input v-model="doctorForm.rate_percent"
                 :rules="[val => val >= 0 && val <= 100 || 'Не меньше 0 и не больше 100']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="number"
                 label="Ставка"/>
        <q-select v-model="doctorForm.preferred_shift"
                  :options="shiftTypes"
                  option-label="label"
                  option-value="value"
                  style="width: 100%; border-radius: 4px"
                  label="Предпочтительные смены" />
        <q-select v-model="doctorForm.preferred_schedule"
                  :options="scheduleTypes"
                  option-label="label"
                  option-value="value"
                  style="width: 100%; border-radius: 4px"
                  label="Предпочтительное расписание" />
      </q-item>
      <q-item>
        <q-btn class="q-mt-md"
               color="primary"
               style="width: 100%; border-radius: 4px"
               @click="handleCreateUser">
          {{ 'Создать' }}
        </q-btn>
      </q-item>
    </q-card>
  </q-dialog>
</template>

<script setup>

import {computed, defineComponent, reactive} from "vue";
import {doctorsStore} from "stores/doctors-store";

defineComponent({
  name: 'CreateDoctorModal'
});

const doctors = doctorsStore()

const availableModalities = computed(() => {
  return doctors.availableModalities.filter((el) => el.code !== doctorForm.main_modality?.code)
})

const shiftTypes = computed(() => doctors.shiftTypes)
const scheduleTypes = computed(() => doctors.scheduleTypes)

const doctorForm = reactive({
  user: {
    full_name: '',
    email: '',
    password: ''
  },
  main_modality: null,
  additional_modalities: [],
  rate_percent: 0,
  preferred_schedule: null,
  preferred_shift: null
})

const defineMainModality = () => {
  doctorForm.additional_modalities = doctorForm.additional_modalities.filter((el) => el.code !== doctorForm.main_modality?.code)
}
const handleCreateUser = async () => {
  try {
    await doctors.createDoctor(doctorForm)
  } catch (err) {
    console.error(err)
  }
}

</script>


<style scoped lang="scss">

</style>
